<template>
  <div class="history" v-if="historys.length">
    <h4 class="history-title">历史搜索</h4>
    <transition-group name="list" class="g-list" tag="ul">
      <li class="g-list-item" v-for="item in historys" :key="item" >
        <span class="g-list-text" @click="goDetail(item)">{{ item }}</span>
        <van-icon class="icon" name="cross" @click="deleteHistory(item)"/>
      </li>
    </transition-group>
    <a href="javascript:;" class="history-btn" @click="clearHistory">
      <van-icon name="delete-o"/>
      清空历史搜索</a
    >
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: "SearchHistory",
  data() {
    return {
    //   historys: [],
    };
  },
  mounted() {
    //   this.getHistory()
    console.log(this.historys);
  },
  computed:{
      ...mapState({
          historys:state=>state.historys.historys
      })
  },
  methods: {
    //   删除单条历史记录
    deleteHistory(item){
        this.$store.dispatch('deleteHistory',item)
    },
    //   清空历史记录
      clearHistory(){
          this.$store.dispatch('clearHistorys')
      },
    // 跳转详情页
    goDetail(val){
        this.$router.push("/detail?text=" + val);
    }
  
  },
};
</script>

<style scoped>
.history {
  padding-left: 0.3rem;
  background-color: #fff;
  /* border-bottom: 1px solid #e5e5e5; */
  margin-bottom: 0.3rem;
}
.history-title {
  height: 0.4rem;
  line-height: 1.1rem;
  color: #5d656b;
  font-size: 0.5rem;
  font-weight: bold;
}

.iconfont {
  margin-right: 0.2rem;
}

.g-list {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 0.7rem;
}
.g-list-item {
  display: flex;
  font-size: 0.4rem;
  line-height: 0.7rem;
  height: 0.7rem;
  padding: 0.3rem 0.3rem;
  color: #686868;
}
.g-list-text {
  display: flex;
  flex: 1;
}
.g-list-item .icon {
  font-size: 0.5rem;
}
.history-btn {
  /* @include flex-center(); */
  font-size: 0.5rem;
  /* width: 80%; */
  height: 3.3rem;
  background: none;
  padding: 0.3rem 0.7rem;
  border: 1px solid #ccc;
  border-radius: 0.1rem;
  margin: 0 2.2rem;
  color: #686868;
}
</style>
